<style lang='scss' type='stylesheet/scss' scoped>
</style>
<template>
 <div>
  <as-h2>嵌套 dialog</as-h2>
  <as-card :text="text"
           title="在嵌套的 dialog 中，需要在最上层的 dialog 添加属性 appendToBody">
   <as-button @click="dialogVisible = true">打开对话框</as-button>
   <as-dialog :visible.sync="dialogVisible"
              title="对话框标题">
    <as-button @click="dialogVisible2=true">打开嵌套的对话框</as-button>
    <as-button @click="dialogVisible=false"
               slot="footer"
               style="float:right"
               type="primary">确定</as-button>
   </as-dialog>
   <as-dialog :visible.sync="dialogVisible2"
              title="对话框2标题">
    内层
    <as-button @click="dialogVisible2=false"
               slot="footer"
               style="float:right"
               type="primary">确定</as-button>
   </as-dialog>
  </as-card>
 </div>
</template>

<script type="text/ecmascript-6">
import { mapGetters } from "vuex";
export default {
  name: "",
  computed: {
    ...mapGetters(["isMobile"])
  },
  data() {
    return {
      name: "",
      dialogVisible: false,
      dialogVisible2: false,
      text: `<template>
   <div>
     <as-button @click="dialogVisible = true">打开对话框</as-button>
     <as-dialog :visible.sync="dialogVisible"
                title="对话框标题">
       <as-button @click="dialogVisible2=true">打开嵌套的对话框</as-button>
       <as-button @click="dialogVisible=false"
                  slot="footer"
                  style="float:right"
                  type="primary">确定</as-button>
     </as-dialog>
     <as-dialog :visible.sync="dialogVisible2"
                title="对话框2标题">
       内层
       <as-button @click="dialogVisible2=false"
                  slot="footer"
                  style="float:right"
                  type="primary">确定</as-button>
     </as-dialog>
   </div>
 </template>
 <script>
 export default {
   data() {
     return {
       dialogVisible: false,
       dialogVisible2: false
     }
   }
 }
 <\/script>`
    };
  }
};
</script>
